<template>
  <div class="header-style">
    <div class="inner">
      <div class="logo">
        <a href="" class="logo-inner">
          <img src="@/assets/icon/windmill-two.png" class="windmill" />
          <div class="title">魔力风车</div>
        </a>
      </div>
      <div>
        <div v-if="classifylist">
          <ul class="clhlist">
            <li v-for="item in classifyh">
              <a>{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div v-else>
          <ul class="mainlist">
            <li v-for="tag in maintags">
              <router-link :to="tag.path" class="linkstyle">{{
                tag.text
              }}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div style="flex: 1"></div>
      <div class="searchblock">
        <el-input v-model="search" clearable>
          <template #suffix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="user">
        <div v-if="checklogin" class="userblock">
          <!-- 内容栏 -->
          <!-- <div class="btndp">
            <router-link to="/account-center/my-favourite" class="routerlink"
              >追漫</router-link
            >
          </div> -->
          <div class="btndp">
            <router-link to="/account-center/account-info" class="routerlink"
              >我的</router-link
            >
          </div>
          <!-- 头像 -->

          <el-avatar
            class="avatar"
            :src="'http://localhost:8181' + user.avatar"
          ></el-avatar>
        </div>
        <div v-else class="tologin">
          <span @click="open_login">登录</span>
          <el-divider direction="vertical"></el-divider>
          <span @click="open_login">注册</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 登录 -->
  <div class="loginblock">
    <el-dialog v-model="loginVisible" distory-on-close="true" title="登录">
      <el-form class="loginform">
        <el-form-item>
          <el-input
            v-model="loginform.username"
            clearable
            class="logininput"
            placeholder="用户名"
          >
            <template #prefix>
              <span> @ </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="password"
            v-model="loginform.password"
            clearable
            class="logininput"
            placeholder="密码"
          >
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
          "
        >
          <el-button class="loginbutton" @click="userlogin">登录</el-button>
          <el-button class="loginbutton" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>
<script>
import request from "@/axios/http";
import { Search, User, Lock, Iphone } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
export default {
  name: "home-header",
  components: {
    Search,
    User,
    Lock,
    Iphone,
  },
  data() {
    return {
      maintags: [
        { text: "首页", path: "/" },
        { text: "排行榜", path: "/rank" },
        { text: "分类", path: "/classify" },
        { text: "更新", path: "/update" },
      ],
      history: [
        {
          img: "",
          id: "123465",
          text: "123465",
          recently: "2023-9-06",
          reading: "003",
        },
        {
          img: "",
          id: "123465",
          text: "123465",
          recently: "2023-9-06",
          reading: "003",
        },
      ],
      classifyh: [
        {
          name: "魔幻",
        },
        {
          name: "科幻",
        },
        {
          name: "热血",
        },
        {
          name: "都市",
        },
        {
          name: "灵异",
        },
        {
          name: "武侠",
        },
        {
          name: "现代",
        },
        {
          name: "古风",
        },
      ],
      loginform: {
        username: "admin",
        password: "admin",
      },
      my_favourite: [],
      search: "",
      checklogin: false,
      showclassify: true,
      loginVisible: false,
      classifylist: false,
      user: {},
    };
  },
  methods: {
    open_login() {
      this.loginVisible = true;
    },
    userlogin() {
      //向后端发送信息
      request.post("/user/userlogin", this.loginform).then((res) => {
        console.log(res.code);
        if (res.code == 200) {
          this.loginVisible = false;
          this.$message({
            type: "success",
            message: "登陆成功！",
          });
          this.checklogin = true;
          //缓存用户状态下次加载时直接展示
          sessionStorage.setItem("TOKEN", res.data.token);
          sessionStorage.setItem("user", JSON.stringify(res.data.user));
          this.user = res.data.user;
        } else {
          this.$message({
            type: "error",
            message: "登陆失败！",
          });
        }
      });
    },
    register() {
      if (this.loginform.username == "" || this.loginform.password == "") {
        return ElMessage.info("账号或密码不能注册为空");
      }
      request({
        url: "user/insert",
        method: "post",
        data: this.loginform,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage.success("注册成功");
          dialogVisible.value = false;
          loadTable();
        } else if (res.code == 400) {
          ElMessage.info("账号已经存在");
        } else {
          ElMessage.error("注册失败");
        }
      });
    },
  },
  mounted() {
    if (sessionStorage.getItem("TOKEN")) {
      this.checklogin = true;
      this.user = JSON.parse(sessionStorage.getItem("user"));
    }
  },
  watch: {},
  computed: {},
  setup() {
    return {};
  },
};
</script>
<!-- 自定义组件 -->
<style scoped lang="less">
// 整体
.header-style {
  // 定位
  align-items: center;
  position: fixed;
  height: 75px;
  width: 100%;
  padding: 0;
  z-index: 15;
  top: 0;
  //风格
  background-color: white;
  box-shadow: 1px 5px 5px #888888;
  display: flex;
  justify-content: center;
  line-height: 75px;
  float: left;
  min-width: 50vh;
  transform: 0.75;
}

.header-style .inner {
  width: 1100px;
  height: 75px;
  // background-color: crimson;
  display: flex;
}
</style>
<style scoped lang="less">
// logo
.logo {
  // background-color: aqua;
  width: 140px;
  height: 75px;
  display: flex;
  // justify-content: center;
  align-items: center;
}

.logo .logo-inner {
  // background-color: cadetblue;
  // width: 200px;
  height: 30px;
  display: flex;
  text-decoration: none;
}

.windmill {
  // margin-top: 10px;
  width: 30px;
  height: 30px;
}

.logo-inner .title {
  font-size: 25px;
  line-height: 30px;
  color: black;
  justify-content: center;
  font-family: "loli", sans-serif;
  white-space: nowrap;
}
</style>
<style scoped lang="less">
.mainlist {
  display: flex;
  // width: 400px;
  // background-color: aquamarine;
  list-style-type: none;
}

.mainlist li {
  background-color: white;
  width: 60px;
  text-align: center;
  // color: white;
  font-size: large;
}

.linkstyle {
  text-decoration: none;
  display: block;
  color: black;
  transition: all 0.3s;
}

.linkstyle:hover {
  color: lightblue;
}

.clhlist {
  position: relative;
  display: flex;
  list-style-type: none;
  width: 360px;
}

.clhlist li {
  display: flex;
  position: relative;
  width: 45px;
}

.clhlist li a {
  width: 45px;
  text-align: center;
  transition: 0.3s;
}

.clhlist li a:hover {
  color: lightblue;
}
</style>
<!-- 搜索框 -->
<style scoped lang="less">
.searchblock {
  border-radius: 35px;
}

.searchblock /deep/ .el-input {
  width: 200px;
  height: 30px;
}

.searchblock /deep/ .el-input__wrapper {
  border-radius: 45px;
  box-shadow: 0px 0px 1px black;
}

.searchblock /deep/ .el-input__wrapper:hover {
  box-shadow: 0px 0px 3px black;
}

.searchblock /deep/ .el-input__wrapper.is-focus {
  box-shadow: 0px 0px 5px lightblue;
}
</style>
<!-- 登录框 -->
<style scoped>
.tologin {
  z-index: 0;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.tologin span {
  align-items: center;
  display: block;
  cursor: pointer;
  transition: all 0.3s;
  user-select: none;
}

.tologin span:hover {
  color: lightblue;
}
</style>
<!-- 登陆弹窗 -->
<style scoped lang="less">
.loginblock {
  display: block;
}

.loginblock /deep/ .el-dialog {
  border-radius: 15px;
  width: 500px;
  position: absolute;
  display: flex;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.loginblock /deep/ .el-dialog__headerbtn:hover .el-dialog__close {
  color: lightblue;
}

.loginform {
  width: 300px;
  // background-color: aqua;
}

.loginbutton {
  width: 140px;
  background-color: lightblue;
  border: none;
  color: white;
}

.loginbutton:active {
  border: none;
}

.logininput {
  position: relative;
}

.logininput /deep/ .el-input__wrapper {
  box-shadow: none;
  border-bottom: 1px solid grey;
}

.logininput /deep/ .el-input__wrapper.is-focus {
  border-bottom: 1px solid lightblue;
}
</style>
<!-- 导航栏用户部分 -->
<style scoped lang="less">
.userblock {
  display: flex;
  position: relative;
  height: 75px;
  align-items: center;
  // margin:0 50px;
}

.btndp {
  display: block;
}

.btndp .routerlink {
  // background-color: aquamarine;
  position: relative;
  width: 65px;
  padding: 0 15px;
  height: 75px;
  color: black;
  text-decoration: none;
  transition: all 0.3s;
}

.btndp .dropdown {
  display: none;
  position: absolute;
  background-color: rgb(252, 252, 252);
  width: 150px;
  transform: translate(-25%, 0);
  box-shadow: 0 0 1px black;
  // transition: height 0.3s;
}

.btndp:hover .dropdown {
  display: block;
}

.routerlink:hover {
  color: lightblue;
}

.userblock .avatar {
  position: relative;
  align-items: center;
  margin: 0 20px;
}
</style>
